<template>
  <div>
    <view class="header">
      <text class="title">账号管理</text>
    </view>
  <div class="user-profile">
    <div class="profile-row" id="avatar">
      <text class="label">头像</text>
      <img class="avatar" :src=avatarUrl alt="头像"  @tap="updateAvatar">
    </div>
    <div class="profile-row">
      <text class="label">昵称</text>
      <text class="nickname">{{ nickname }}</text>
    </div>
    <div class="profile-row">
      <text class="label">账户实名信息</text>
      <text class="real-name">{{ realName? '已实名' : '未实名' }}</text>
      <img class="arrow" src="/static/images/箭头.png" alt="箭头">
    </div>
    <view class="logout-button" @tap="logout">退出登录</view>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl: '/static/images/箭头.png',
      nickname: '用户昵称',
      realName: 0,
    };

  },
  onShow(){

    const storageSync =JSON.parse(wx.getStorageSync("userInfo"))
    console.log(storageSync)
    this.avatarUrl=storageSync.avatar;
    this.nickname=storageSync.name
    this.realName=storageSync.status
  },
  methods: {
    updateAvatar(){
      wx.showActionSheet({
        title:'修改头像',
        itemList:['上传本地头像','上传网络头像'], //文字数组
        success: (res) => {
          switch(res.tapIndex) {
            case 0: {
              console.log('点击了 选项一')
              wx.chooseImage({  //从本地相册选择图片或使用相机拍照
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                  console.log(res)
                }
                //这里res中会有一个tempFilePaths,在微信小程序中暂时能用，不能一直使用
              })
              break;
            }
            case 1: {
              console.log('点击了 选项二')
              wx.showModal({
                title:'修改头像',
                editable:true,//显示输入框
                placeholderText:'输入图片URL',//显示输入框提示信息
                success: res => {
                  if (res.confirm) { //点击了确认
                    this.avatarUrl=res.content
                    wx.setStorage({
                      key:"updateAvatar",
                      data:1
                    })
                    const userInfo=JSON.parse(wx.getStorageSync("userInfo"))
                    userInfo.avatar=this.avatarUrl
                    wx.setStorage({
                      key:"userInfo",
                      data:JSON.stringify(userInfo)
                    })
                  } else {
                    console.log('用户点击了取消')
                  }
                }
              })
              break;
            }

          }
        },
        fail (res) {
          console.log('取消选项')
        }
      })


        },
    logout() {
      // 退出登录的逻辑
      console.log('退出登录');
      wx.removeStorageSync("userInfo");
      wx.setStorage({
        key:"outFlag",
        data:1
      })
      wx.showToast({
        title: '退出登录成功',
        icon: 'success',
        duration: 1500,
        success: () => {
          setTimeout(() => {
            wx.switchTab({
              url: '/pages/personal/main'
            });
          }, 1500); // 延迟跳转，确保提示显示完全
        }
      });
    }
  }

};
</script>

<style scoped lang="stylus">

.header
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  padding 10px


.user-profile
  padding-top 10px

.profile-row
  padding-right 9px
  padding-left 12px
  border-radius 8px
  display: flex
  justify-content: space-between
  align-items: center
  margin-bottom: 5px
  background-color: #fff
  border-bottom: 1px solid #ccc
  height 47px

.label
  font-weight: bold
  color: #333

.avatar
  width: 50px
  height: 50px
  border-radius: 50%


.nickname
  color #007bff

.real-name
  color #555
  position: relative
  right -24%

.arrow
  width 10%
  height 70%

.logout-button {

  bottom: 7%;
  text-align: center;
  padding: 10px;
  background-color: #8CC84B;
  color: #fff;
  border-radius: 8px;
  margin-top: 20px;
  cursor: pointer;
}

#avatar
  height 60px

</style>
